<template>
    <div class="user">
        <el-form :inline="true" :model="searchParam" class="demo-form-inline">
            <el-form-item>
                <el-input clearable v-model="searchParam.publishLoginName" placeholder="发布人名称"/>
            </el-form-item>
            <el-form-item>
                <el-input clearable v-model="searchParam.content" placeholder="表白墙内容"/>
            </el-form-item>
            <el-form-item>
                <el-select clearable v-model="searchParam.publishSchoolUuid" placeholder="请选择学校">
                    <el-option v-for="school in data.schools" :key="school.uuid" :label="school.name"
                               :value="school.uuid"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select
                    clearable
                    v-model="searchParam.isSyncLibertySquare"
                    placeholder="是否同步自由广场"
                >
                    <el-option label="同步" value="true"/>
                    <el-option label="未同步" value="false"/>
                </el-select>
            </el-form-item>
            <el-form-item style="width: auto">
                <el-button type="primary" @click="search" size="small">查询</el-button>
                <el-button type="primary" @click="exportConfessionalWallData" size="small">导出数据</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="data.confessionalWalls" border style="width: 100%" v-loading="data.loading"
                  element-loading-text="拼命加载中">
            <el-table-column prop="content" label="内容" align="center" width="400px"/>
            <el-table-column prop="publishNickName" label="发布人" align="center" width="150px"/>
            <el-table-column prop="publishSchoolName" label="发布学校" align="center" width="150px"/>
            <el-table-column prop="status" label="同步自由广场" align="center" width="150px">
                <template #default="scope">
                    <el-tag
                        v-show="scope.row.isSyncLibertySquare" type="success"
                        disable-transitions
                    >同步
                    </el-tag>
                    <el-tag
                        v-show="!scope.row.isSyncLibertySquare" type="primary"
                        disable-transitions
                    >未同步
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center" width="150px">
                <template #default="scope">
                    <el-tag
                        v-show="scope.row.status === 1" type="primary"
                        disable-transitions
                    >待审核
                    </el-tag>
                    <el-tag
                        v-show="scope.row.status === 2" type="danger"
                        disable-transitions
                    >未通过
                    </el-tag>
                    <el-tag
                        v-show="scope.row.status === 3" type="success"
                        disable-transitions
                    >已通过
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="viewCount" label="浏览量" align="center" width="150px"/>
            <el-table-column prop="commentCount" label="评论量" align="center" width="150px"/>
            <el-table-column prop="kudosCount" label="点赞量" align="center" width="150px"/>
            <el-table-column prop="createTime" label="创建时间" width="180" align="center">
            </el-table-column>
            <el-table-column prop="updateTime" label="更新时间" width="180" align="center">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="230" align="center">
                <template #default="scope">
                    <el-button class="button-space" type="primary" size="small"
                               v-if="scope.row.status === 1"
                               @click="toExamine(scope.row.uuid)">审核
                    </el-button>
                    <el-button class="button-space" type="info" size="small"
                               @click="viewDetail(scope.row.uuid)">详情
                    </el-button>
                    <el-popconfirm title="你确定要删除该表白墙吗？" confirm-button-text="是" cancel-button-text="否"
                                   @confirm="deleteConfessionalWall(scope.row.uuid)">
                        <template #reference>
                            <el-button class="button-space" type="danger" size="small">删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="data.total"
                       style="text-align: center; margin-top: 10px" @current-change="currentChange">
        </el-pagination>
        <!-- 查看图片 -->
        <el-dialog title="查看图片" v-model="data.confessionalWallImageDisable">
            <div class="demo-image" v-for="image in data.confessionalWallImages" :key="image">
                <el-image style="width: 100px; height: 100px" :src="image" fit="fit"
                          :preview-src-list="data.confessionalWallImages"/>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {onMounted, reactive} from "vue";
import {page, deleted, exportConfessionalWall} from "@/api/confessionalWall/confessionalWall"
import {all} from "@/api/school/school";
import {ElLoading, ElMessage} from "element-plus";
import {useRouter} from 'vue-router'
import dayjs from "dayjs";

export default {
    setup() {
        const searchParam = reactive({
            content: '',
            publishSchoolUuid: '',
            publishLoginName: '',
            page: 1,
            size: 10,
            isSyncLibertySquare: ''
        })
        const data = reactive({
            confessionalWalls: [],
            total: 0,
            loading: false,
            schools: [],
            confessionalWallImageDisable: false,
            // 表白墙图片
            confessionalWallImages: [],
            commodityExamineDisable: false,
            // 商品详情
            commodityDetail: ''
        })
        const router = useRouter();
        /**
         * 分页查询表白墙
         * @returns {Promise<void>}
         */
        const pageSearchConfessionalWall = async () => {
            data.loading = true
            page(searchParam).then(res => {
                data.confessionalWalls = res.data.records
                data.total = res.data.total
            }).finally(() => {
                data.loading = false
            })
        }
        /**
         * 删除表白墙
         * @param uuid
         * @returns {Promise<void>}
         */
        const deleteConfessionalWall = async (uuid) => {
            deleted(uuid).then(() => {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
                pageSearchConfessionalWall()
            })
        }
        /**
         * 搜索查询商品
         * @returns {Promise<void>}
         */
        const search = async () => {
            page(searchParam).then(res => {
                data.confessionalWalls = res.data.records
                data.total = res.data.total
            })
        }

        /**
         * 获取全部学校
         * @returns {Promise<void>}
         */
        const allSchool = async () => {
            all().then(res => {
                data.schools = res.data
            })
        }
        /**
         * 查看图片
         */
        const viewDetail = (uuid) => {
            router.push({path: "/confessionalWall/detail", query: {uuid: uuid}})
        }

        /**
         * 导出表白墙数据
         */
        const exportConfessionalWallData = () => {
            const loading = ElLoading.service({
                lock: true,
                text: '导出中...',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            exportConfessionalWall(searchParam).then(res => {
                const blob = new Blob([res]);
                const day = dayjs().format('YYYY-MM-DD');
                const fileName = `表白墙列表${day}.xls`;
                const elink = document.createElement('a');
                elink.download = fileName;
                elink.style.display = 'none';
                elink.href = URL.createObjectURL(blob);
                document.body.appendChild(elink);
                elink.click();
                URL.revokeObjectURL(elink.href); // 释放URL 对象
                document.body.removeChild(elink);
                loading.close()
            })
        }

        /**
         * 跳转到审核页面
         * @param uuid
         */
        const toExamine = (uuid) => {
            router.push({path: '/confessionalWall/examine', query: {uuid: uuid}})
        }
        onMounted(() => {
            pageSearchConfessionalWall()
            allSchool()
        })
        return {
            data,
            searchParam,
            search,
            deleteConfessionalWall,
            allSchool,
            viewDetail,
            exportConfessionalWallData,
            toExamine
        }
    }
}
</script>

<style scoped>
.demo-image {
    padding: 30px 0;
    text-align: center;
    display: inline-block;
    width: 20%;
}
</style>